<template>
  <div class="newsInfo">
      <h2 class="title">{{ this.newInfoData.title }}</h2>
      <p class="subtitle">
          <span>发表时间：{{ this.newInfoData.add_time | dateStrFormat }}</span>
          <span>点击次数：{{ this.newInfoData.click }}次</span>
      </p>
      <hr>
      <div class="content" v-html="this.newInfoData.content"></div>
      <cmt></cmt>
  </div>
</template>

<script>
import { Toast } from 'mint-ui'
import cmt from '../comment/cmt'
export default {
  data(){
      return {
          id: this.$route.params.id,
        // id: this.$route.query.id
          newInfoData: []
      }
  },
  created(){
      this.getNewsInfo();
  },
  methods:{
      getNewsInfo() {
          this.$http.get('api/getnew/' + this.id).then(result => {
              if(result.body.status === 0) {
                  this.newInfoData = result.body.message[0];
                //   console.log(result.body.message)
              } else {
                  Toast('获取数据失败')
              }
          })
      }
  },
  components:{
      cmt: cmt
  }
}
</script>

<style lang="less" scoped>
.newsInfo {
    .title {
        font-size: 16px;
        color: red;
        text-align: center;
        margin: 15px 0;
    }
    .subtitle {
        display: flex;
        justify-content: space-between;
        color: skyblue;
        padding: 0 4px;
    }
    .content /deep/ img { // 在css中使用 >>> 可以设置嵌套组件的样式，在 lass 和 scss 中使用 /deep/ 来设置嵌套组件的样式
        width: 100%;
        padding: 0 4px;
    }
    .content /deep/ p {
        padding: 0 4px;
    }
}

</style>


